require.config({
    paths:{
        "jquery":"../lib/jquery.min",
        "mode":"module"
    }
})

require(['jquery'],function($){
    $(function(){
        require(['mode'],function(myMode){
            myMode.baseMode()
           //这里写本页面专用的js
            //全选按钮
            $('.catalist_all').click(function(){
                location.href = './goodlist.html' + myMode.info()
            })
            //购物袋按钮 -- 跳转页面功能
            $('.bag').click(function(){
                location.href = './cart.html' + myMode.info()
            })
            //登录框登录按钮
            $('#logo').click(function(){
                location.href = './' + myMode.info()
            })
            
        //这里写本页专用代码
            //更新本地存储
            // var orignalSetItem = localStorage.setItem;   //保留原来的setItem
            // localStorage.setItem = function(key,newValue){  //重写setItem
            //     var setItemEvent = new Event("setItemEvent")
            //     setItemEvent.newValue = newValue
            //     window.dispatchEvent(setItemEvent)
            //     orignalSetItem.apply(this,arguments)
            // }
            // // 监听本页面localstorage的变化，
            // window.addEventListener("setItemEvent", function (e) {
                // alert(e.newValue);
                // console.log('bianhua')    
            // });

        //监听其他页面更改localstorage,自动刷新，
            window.addEventListener("storage", function () { 
                location.reload(); 
            })
            var goodArr = JSON.parse(localStorage.getItem('goods')) 
            //加载商品
            if(localStorage.getItem('goods')){
                //渲染页面,页面刷新数据需要的操作也放在这里
                $.ajax({
                    type: "get",
                    url: "./data/goods.json",
                    dataType: "json",
                    success: function (data) {
                        //获取数据
                        let goods = data["goods"]
                        let tempGood = ''
                        $.each(goods, function (index, arr) { //啊。三层循环
                            $.each(goodArr, function (id, objLocal) {
                                    
                                    $.each(arr, function (index, obj) { 
                                    //这时找到单个的数据项，obj
                                    //注意，这里商品的数量是用的本地缓存（objLocal["num"]），不是商品数据里的num（库存） 
                                        if(objLocal["id"] == obj["id"]){
                                            let check = objLocal.check? 'checked':''    //checked属性只要写在标签里，，无论值是什么，都会选中，（只要有这个属性就会选中，而不是ture|false）
                                            let good = `
                                            <li class="cart_item white_bg">
                                                <input type="checkbox" class="select" `+check+`>
                                                <a href="./good.html?id=${obj["id"]}&price=${obj["price"]}&title=${obj["title"]}&m-title=${obj["m-title"]}&o-price=${obj["o-price"]}`+myMode.info()+`">
                                                    <img src=${obj["src"]} alt="">
                                                </a>
                                                <div class="good_txt">
                                                    <h2>${obj["title"]}</h2>
                                                    <h3>${obj["m-title"]}</h3>
                                                </div>
                                                <span class="single">￥${obj["price"]}</span>
                                                <div class="count"><input type="button" value="-" class="dec"><input type="text" class="mod" value="${objLocal["num"]}"><input type="button" value="+" class="add"></div>
                                                <span class="account_small">￥${obj["o-price"]}</span>
                                                <button class="del" data-id=${obj["id"]}>删除</button>
                                            </li>
                                            `
                                            tempGood+=good
                                        }
                                    })
                            })
                        })
                        $('.cart_body').html(tempGood)
                        updataSmall()  //页面刚加载出来的时候，上面的小计就不是原来的单价了。所以要更新一下小计
                        listenCheck(goodArr)
                        updataAll()
                    }
                })

                //删除商品
                $('.cart').on('click','.del',function(){
                    $(this).parent().remove() //删除元素
                    let id = $(this).attr('data-id')
                    //遍历本地存储的数据
                    $.each(goodArr,function(index,objLocal){
                        if(objLocal.id==id){
                            goodArr.splice(index,1)
                            return false
                        }
                    })
                    //更新本地存储
                    updateLocal(goodArr)
                    listenCheck(goodArr)
                    updataAll()
                })
                //批量删除
                $('.cart').on('click','.lot_del',function(){
                    $('.cart_item').find('.select').each(function(){
                        if($(this).prop('checked')){
                            $(this).parent().remove() //删除元素
                            let id = $(this).siblings('.del').attr('data-id')
                            
                            //遍历本地存储的数据
                            $.each(goodArr,function(index,objLocal){
                                if(objLocal.id==id){
                                    goodArr.splice(index,1)
                                    return false
                                }
                            })
                        }
                    })
                    updateLocal(goodArr)
                    listenCheck(goodArr)
                    updataAll()
                })

                //增加商品
                $('.cart').on('click','.add',function(){
                    $(this).prev().val(function(i,o){
                        return ++o
                    }) 
                    let id = $(this).parent().siblings('button').attr('data-id')
                    $.each(goodArr,function(index,objLocal){
                        if(objLocal.id==id){
                            objLocal.num++
                        }
                    })
                    
                    updateLocal(goodArr)
                    updataSmall()
                    updataAll()
                })
                //减少商品
                $('.cart').on('click','.dec',function(){
                    if( $(this).next().val()<=1){
                        return
                    }
                    $(this).next().val(function(i,o){
                        return  --o
                    }) 
                    let id = $(this).parent().siblings('button').attr('data-id')
                    $.each(goodArr,function(index,objLocal){
                        if(objLocal.id==id){
                            objLocal.num--
                        }
                    })
                    
                    updateLocal(goodArr)
                    updataSmall()
                    updataAll()
                })
                //修改商品
                $('.cart').on('blur','.mod',function(){
                    if($(this).val()<1){
                        $(this).val(1)
                    }
                    let id = $(this).parent().siblings('button').attr('data-id')
                    let tempNum = $(this).val()
                    $.each(goodArr,function(index,objLocal){
                        if(objLocal.id==id){
                            objLocal.num= tempNum
                        }
                    })
                    updateLocal(goodArr)
                    updataSmall()
                    updataAll()
                })

                //  全选按钮
                $('.cart').on('click','.select_all',function(){
                    //$(this).attr('checked')==true 错，不能这么做
                    if($(this).prop('checked')){
                    $('.select_all').prop('checked',true)
                    $('.select').prop('checked',true)
                    }else{
                        $('.select_all').prop('checked',false)
                        $('.select').prop('checked',false)
                    }
                    
                    listenCheck(goodArr)
                    updateLocal(goodArr)
                    updataAll()
                })
                //单选按钮点击事件
                $('.cart').on('click','.select',function(){
                    let id = $(this).siblings('.del').attr('data-id')
                    let status = $(this).prop('checked')
                    $.each(goodArr,function(index,objLocal){
                        if(objLocal.id==id){
                            objLocal.check = status
                        }
                    })
                    
                    updateLocal(goodArr)
                    listenCheck(goodArr)
                    updataAll()
                })

                

                //监听是否选中所有单选按钮，把按钮的状态也更新到localstorage
                //全选则把全选键也选中
                function listenCheck(obj){
                
                    if(obj.length){  //如果本地缓存没有物品-->购物车为空
                        var checkNum = 0
                        $('.cart_item').find('.select').each(function(){
                            let id = $(this).siblings('.del').attr('data-id')
                            if($(this).prop('checked')){
                                checkNum++
                            }
                        //状态也更新到localstorage
                            let status = $(this).prop('checked') 
                            $.each(goodArr,function(index,objLocal){ 
                                if(objLocal.id==id){
                                    objLocal.check = status
                                }
                            })
                        })
                        // console.log(checkNum)
                        if(checkNum == $('.select').length){
                            $('.select_all').prop('checked',true)
                        }else{
                            $('.select_all').prop('checked',false)
                        }
                    }else{
                        $('.select_all').prop('checked',false)
                    }
                    
                }
                

                //本地localstorage变化，商品数量（页面元素数值）会跟着变化（因为上面的操作），这里直接根据这个数值对其他数值渲染就行了
                //渲染 local  --> html , 操作 html -->js -->html   
                //其实这样不行，因为当别的页面使localstorage改变的时候，当前页面只能监听到localstorage变化，而本地的html变化是依靠在委托事件上的
                //localstorage变化并没有触发页面的委托事件（点击，选中。。。。），，所以行不通
                
                //更新小计
                function updataSmall(){
                    $('.cart').find('.account_small').each(function(){
                        let id = $(this).next().attr('data-id')
                        var temp
                        $.each(goodArr,function(index,objLocal){
                            if(objLocal.id==id){
                                // objLocal.num= tempNum
                                temp = objLocal.num
                            }
                        })
                        let single = $(this).siblings('.single').text().slice(1)
                        $(this).text('￥'+eval(temp*single))
                    })
                }

                //更新总计,（根据选中的数量，把商品小计总计一下）
                function updataAll(){
                    var count = 0
                    var num = 0
                    $('.cart_item').find('.select').each(function(){
                        let id = $(this).siblings('.del').attr('data-id')
                        if($(this).prop('checked')){  //小计是通过localStrage更新的，这里不用在找本地了
                            let small = $(this).siblings('.account_small').text().slice(1)
                            count += parseInt(small)
                            num++
                        }
                    })
                    $('.all_count i').text('￥'+count)
                    $('.selected i').text(num)
                    //顺便把左边的已选中数量也更新
                }
                function updateLocal(obj){
                    if(obj.length){
                        localStorage.setItem('goods',JSON.stringify(obj))
                    }else{
                        localStorage.removeItem('goods')
                        let noGoods = ' <li class="cart_item white_bg empty_cart">购物车是空的哦，快去选购商品吧~<li>'
                        $('.cart_body').html(noGoods)
                    }

                }
            }else{
                let noGoods = ' <li class="cart_item white_bg empty_cart">购物车是空的哦，快去选购商品吧~<li>'
                $('.cart_body').html(noGoods)
            }

         })
        
    })
})







    

    




